<template>
    <section>
        <el-dialog
                :title="'方案:'+planMateriel.planName+'-设置农资'"
                :visible.sync="visible"
                :value="value"
                width="800px"
        >
            <el-row>
                <el-col
                        :span="6"
                        :offset="17"
                >
                    <el-button
                            type="primary"
                            icon="el-icon-fa-plus"
                            size="small"
                            @click="planMaterielShow=true"
                    >
                        添加方案农资
                    </el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="dataList"
                    border
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="id"
                        label="ID"
                />
                <el-table-column
                        prop="materielName"
                        label="农资名称"
                />
                <el-table-column
                        prop="dosage"
                        label="用量"
                />
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button
                                    title="编辑"
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-fa-edit"
                                    @click="materielEdit(scope.row)"
                            >
                                编辑
                            </el-button>
                            <el-button
                                    title="删除"
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-fa-trash"
                                    @click="materielDelete(scope.row)"
                            >
                                删除
                            </el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    :title="planMateriel.id===0?'添加方案农资':'编辑方案农资'"
                    :visible.sync="planMaterielShow"
                    append-to-body
                    width="30%"
                    @close="close"
            >
                <el-form
                        :model="planMateriel"
                        :rules="rules"
                        ref="planForm"
                >
                    <el-form-item
                            label="方案名称"
                            :label-width="labelWidth"
                            prop="name"
                    >
                        <span>{{ planMateriel.planName }}</span>
                    </el-form-item>
                    <el-form-item
                            label="农资"
                            :label-width="labelWidth"
                            prop="materielId"
                    >
                        <el-select
                                v-model="planMateriel.materielId"
                                placeholder="请选择农资"
                        >
                            <el-option
                                    v-for="item in materiels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                            label="农资类别"
                            v-if="planMateriel.planType&&planMateriel.planType.value=='NUTRIENT'"
                            :label-width="labelWidth"
                            prop="materielSort"
                    >
                        <el-select
                                v-model="planMateriel.materielSort"
                                placeholder="请选择农资类别"
                        >
                            <el-option
                                    v-for="item in materielSorts"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item
                            label="用量"
                            :label-width="labelWidth"
                            prop="dosage"
                    >
                        <el-input
                                v-model="planMateriel.dosage"
                                auto-complete="off"
                                maxlength="11"
                                suffix-icon="fa fa-mobile"
                                placeholder="请填写用量"
                        />
                    </el-form-item>
                    <el-form-item
                            label="稀释倍数"
                            v-if="planMateriel.planType&&planMateriel.planType.value!='NUTRIENT'"
                            :label-width="labelWidth"
                            prop="dilution"
                    >
                        <el-input
                                v-model="planMateriel.dilution"
                                auto-complete="off"
                                maxlength="11"
                                suffix-icon="fa fa-mobile"
                                placeholder="请填写农资系数倍数"
                        />
                    </el-form-item>
                </el-form>
                <div style="text-align: center;margin-top: 20px">
                    <el-button
                            size="small"
                            @click="cancleMateriel('planForm')"
                    >
                        取 消
                    </el-button>
                    <el-button
                            size="small"
                            type="primary"
                            @click="submit('planForm')"
                    >
                        确 定
                    </el-button>
                </div>
            </el-dialog>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button
                size="small"
                @click="cancle"
        >返回</el-button>

      </span>
        </el-dialog>
    </section>
</template>
<style>
</style>
<script>
    import {mapState} from "vuex";

    export default {
        name: "AddAndEdit",
        data() {
            return {
                visible: false,
                planMaterielShow: false,
                editShow: false,
                labelWidth: "100px",
                materiels: [],
                dataList: [],
                materielSorts: [],
                planTypes: [],
                planMateriel: {
                    id: 0,
                    planName: '',
                    planId: '',
                    planType: '',
                    materielId: '',
                    dilution: '',
                    dosage: '',
                    materielSort: '',
                    drugPeriod: ''
                },
                rules: {
                    materielId: [{required: true, message: "请选择农资", trigger: "blur"}],
                    dilution: [{required: true, message: "请输入稀释倍数", trigger: "blur"}],
                    dosage: [{required: true, validator: this.$validator.decimalValid, trigger: "blur"}],
                    materielSort: [{required: true, message: "请选择农资分类", trigger: "blur"}],
                    drugPeriod: [{required: true, message: "请输入用药时间", trigger: "blur"}]
                }
            };
        },
        computed: {
            ...mapState({
                codebooks: state => state.codebooks.codebooks
            })
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler: function (val) {
                    this.visible = val.show;
                    this.labelWidth = val.formLabelWidth || "120px";
                    this.planMateriel = {
                        id: 0,
                        planId: val.plan.id,
                        planName: val.plan.name,
                        planType: val.plan.planType
                    }
                    this.loadData();
                    this.loadMateriels();
                }

            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
            this.materielSorts = this.codebooks ? this.codebooks.materielSorts : [];
            this.planTypes = this.codebooks ? this.codebooks.planTypes : [];
        },
        methods: {
            close() {
                this.cancleMateriel('planForm');
            },
            cancle() {
                this.visible = false;
                this.planMateriel = {
                    planId: 0,
                    planName: ''
                };
                this.dataList = [];
            },
            cancleMateriel(formName) {
                this.planMaterielShow = false;
                this.planMateriel = {
                    id: 0,
                    planName: this.planMateriel.planName,
                    planId: this.planMateriel.planId,
                    planType: this.planMateriel.planType,
                    materielId: '',
                    dilution: '',
                    dosage: '',
                    materielSort: '',
                    drugPeriod: ''
                };
                this.$refs[formName].clearValidate();
                //加载列表数据
                this.loadData();
            },
            loadData() {
                if (!this.planMateriel || !this.planMateriel.planId || this.planMateriel.planId <= 0) {
                    return;
                }
                this.$api.plan.getPlanMaterielByPlanId(this.planMateriel.planId, result => {
                    this.dataList = result.pager;
                });
            },
            loadMateriels() {
                let type = '';
                if (this.planMateriel.planType && this.planMateriel.planType.value == 'PLANT_PROTECTION') {
                    type = 'PESTICIDE';
                } else {
                    type = 'MANURE'
                }
                this.$api.materiel.all(type, result => {
                    this.materiels = result.materiels;
                })
            },
            materielEdit(row) {
                //查询
                this.$api.plan.planMaterielDetail(row.id, result => {
                    let temp = result.planMateriel;
                    this.planMateriel.id = temp.id;
                    this.planMateriel.materielId = temp.materielId;
                    this.planMateriel.dilution = temp.dilution;
                    this.planMateriel.dosage = temp.dosage;
                    this.planMateriel.drugPeriod = temp.drugPeriod;
                    this.planMateriel.materielSort = temp.materielSort ? temp.materielSort.value : '';
                    this.planMaterielShow = true;
                })
            },
            materielDelete(row) {
                this.$confirm("此操作将删除该方案农资, 是否继续?", "删除提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$api.plan.planMaterielDelete(row.id, () => {
                        this.$message({
                            type: "success",
                            message: "删除方案农资成功",
                            onClose: () => {
                                this.loadData();
                            }
                        });
                    });
                });
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const callback = () => {
                            this.cancleMateriel(formName);
                        };
                        this.planMateriel.id
                            ? this.$api.plan.editPlanMateriel(this.planMateriel, callback)
                            : this.$api.plan.addPlanMateriel(this.planMateriel, callback);
                    } else {
                        return false;
                    }
                });
            }
        },
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        show: false,
                        formLabelWidth: "150px",
                        plan: {
                            id: 0
                        }
                    };
                }
            }
        }
    };
</script>
